<template>

    <button @click="changeNode">修改节点颜色事件</button>

    <h2>添加自定义形状</h2>

    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>


</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;

    const fixArr = [
        {from: "p2", to: "p16", "category": 'oldLink'},
        {from: "p1", to: "p15", "category": 'oldLink'},
        {from: "p11", to: "p17", "category": 'oldLink'},
        {from: "p3", to: "p5", "category": 'oldLink'},
        {from: "p5", to: "p9", "category": 'oldLink'},
        {from: "p14", to: "p24", "category": 'oldLink'},
        {from: "p1", to: "p32", "category": 'oldLink'},
        {from: "p8", to: "p31", "category": 'oldLink'},
        {from: "p7", to: "p39", "category": 'oldLink'},
    ]
    const judgeArr = [
        {from: "p13", to: "p12", "category": 'judgeLink', color: "blue", thick: 2},
        {from: "p13", to: "p10", "category": 'judgeLink', color: "blue", thick: 2},
        {from: "p12", to: "p18", "category": 'judgeLink', color: "blue", thick: 2},
        {from: "p10", to: "p19", "category": 'judgeLink', color: "blue", thick: 2}
    ]
    const judgeStr = ["p13p12", "p13p10", "p12p18", "p10p19"]

    let oldArr = []
    let d1 = false
    let d2 = false


    const getPorts = () => {
        return [    // for each node specify the location using Point values
            {key: "p1", category: "portNodeStyle", text: '1', color: "lightblue", loc: new go.Point(300, 80)},
            {key: "p2", category: "portNodeStyle", text: '2', color: "pink", loc: new go.Point(300, 150)},
            {key: "p3", category: "portNodeStyle", text: '3', color: "pink", loc: new go.Point(420, 150)},
            {key: "p4", category: "portNodeStyle", text: '4', color: "pink", loc: new go.Point(550, 150)},
            {key: "p5", category: "portNodeStyle", text: '5', color: "pink", loc: new go.Point(660, 150)},
            {key: "p6", category: "portNodeStyle", text: '6', color: "pink", loc: new go.Point(770, 150)},
            {key: "p7", category: "portNodeStyle", text: '7', color: "pink", loc: new go.Point(770, 80)},
            {key: "p8", category: "portNodeStyle", text: '8', color: "pink", loc: new go.Point(770, -15)},
            {key: "p9", category: "portNodeStyle", text: '9', color: "pink", loc: new go.Point(770, -125)},
            {key: "p10", category: "portNodeStyle", text: '10', color: "pink", loc: new go.Point(660, -85)},
            {key: "p11", category: "portNodeStyle", text: '11', color: "pink", loc: new go.Point(550, -85)},
            {key: "p12", category: "portNodeStyle", text: '12', color: "pink", loc: new go.Point(420, -85)},
            {key: "p13", category: "portNodeStyle", text: '13', color: "pink", loc: new go.Point(300, -85)},
            {key: "p14", category: "portNodeStyle", text: '14', color: "pink", loc: new go.Point(300, -15)},

            {key: "p15", category: "portNodeStyle", text: '', color: "pink", loc: new go.Point(400, 220)},
            {key: "p16", category: "portNodeStyle", text: '', color: "pink", loc: new go.Point(520, 220)},

            {key: "p45", category: "lightNodeStyle", text: 'D1', color: "pink", loc: new go.Point(400, 300)},
            {key: "p46", category: "lightNodeStyle", text: 'D2', color: "pink", loc: new go.Point(520, 300)},


            {key: "p17", category: "portNodeStyle", text: 'a', color: "pink", loc: new go.Point(550, -180)},
            {key: "p18", category: "portNodeStyle", text: '+5v', color: "pink", loc: new go.Point(420, -180)},
            {key: "p19", category: "portNodeStyle", text: 'GND', color: "pink", loc: new go.Point(300, -180)},

            {
                key: "p20",
                category: "buttonNodeStyle",
                text: '按1',
                color: "lightgray",
                loc: new go.Point(400, 370)
            },
            {
                key: "p21",
                category: "buttonNodeStyle",
                text: '按2',
                color: "lightgray",
                loc: new go.Point(520, 370)
            },

            {key: "p22", category: "lightNodeStyle", text: 'L1', color: "pink", loc: new go.Point(420, -260)},
            // {key: "p23", category: "portNodeStyle", text: 'f', color: "pink", loc: new go.Point(300, -260)},


            {key: "p24", category: "triaUp2NodeStyle", text: '', color: "gray", loc: new go.Point(400, -14)},
            {key: "p25", category: "triaUp2NodeStyle", text: '', color: "gray", loc: new go.Point(440, -14)},
            {key: "p26", category: "triaUp2NodeStyle", text: '', color: "gray", loc: new go.Point(480, -14)},
            {key: "p27", category: "triaUp2NodeStyle", text: '', color: "gray", loc: new go.Point(520, -14)},
            {key: "p28", category: "triaUp2NodeStyle", text: '', color: "gray", loc: new go.Point(560, -14)},
            {key: "p29", category: "triaUp2NodeStyle", text: '', color: "gray", loc: new go.Point(600, -14)},
            {key: "p30", category: "triaUp2NodeStyle", text: '', color: "gray", loc: new go.Point(640, -14)},
            {key: "p31", category: "triaUp2NodeStyle", text: '', color: "gray", loc: new go.Point(680, -14)},


            {key: "p32", category: "triaDown2NodeStyle", text: '', color: "gray", loc: new go.Point(400, 99)},
            {key: "p33", category: "triaDown2NodeStyle", text: '', color: "gray", loc: new go.Point(440, 99)},
            {key: "p34", category: "triaDown2NodeStyle", text: '', color: "gray", loc: new go.Point(480, 99)},
            {key: "p35", category: "triaDown2NodeStyle", text: '', color: "gray", loc: new go.Point(520, 99)},
            {key: "p36", category: "triaDown2NodeStyle", text: '', color: "gray", loc: new go.Point(560, 99)},
            {key: "p37", category: "triaDown2NodeStyle", text: '', color: "gray", loc: new go.Point(600, 99)},
            {key: "p38", category: "triaDown2NodeStyle", text: '', color: "gray", loc: new go.Point(640, 99)},
            {key: "p39", category: "triaDown2NodeStyle", text: '', color: "gray", loc: new go.Point(680, 99)},
            // {
            //     key: "p40",
            //     category: "textBlockNodeStyle",
            //     text: 'ddddddddddd',
            //     color: "gray",
            //     loc: new go.Point(-180, 99)
            // },


        ];
    }
    const getOkLinkTemplate = ($) => {
        return $(go.Link,

            $(go.Shape, {isPanelMain: true, stroke: "red", strokeWidth: 1}),
            $(go.Shape, {
                isPanelMain: true,
                stroke: "crimson",
                strokeWidth: 5,
                name: "PIPE1",
                strokeDashArray: [5, 70]
            }),
        );
    }
    const changeNode = () => {
        var data = myDiagram.model.findNodeDataForKey("Delta");
        // 这个方式可以更新
        if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");
    }

    const init = () => {

        const $ = go.GraphObject.make

        myDiagram = new go.Diagram("chart-diagram", {
            "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
            //这里写画板配置
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            'grid.visible': true, // 显示网格
            scale: 1.0, // 初始视图大小比例
            minScale: 0.5, // 最小视图的缩小比例
            maxScale: 1.5, // 最大视图的放大比例
            initialContentAlignment: go.Spot.Center, // 居中显示
            "linkingTool.linkValidation": function (fromnode, fromport, tonode) {
                return fromnode.linksConnected.count + tonode.linksConnected.count < 3;
            }

        });

        myDiagram.linkTemplateMap.add("judgeLink", getOkLinkTemplate($));



        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                {locationSpot: go.Spot.Center},
                $(go.Shape, "RoundedRectangle",
                    { // 自定义highlight
                        fill: "yellow", stroke: "orange", strokeWidth: 2
                    },
                    new go.Binding("fill", "highlight", function (v) {
                        return v ? "pink" : "lightblue";
                    }),
                    new go.Binding("stroke", "bSearch", function (v) {
                        return v ? "red" : "blue";
                    }),
                    new go.Binding("strokeWidth", "bSearch", function (v) {
                        return v ? 3 : 0;
                    })
                ),
                $(go.TextBlock,
                    {margin: 5},
                    new go.Binding("text", "key")),
            );

        let nodeDataArray = getPorts();
        let linkDataArray = fixArr;
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);


        judgeArr.map((r) => {
            myDiagram.model.addLinkData(r)
        })

        //
        //startAnimation();

    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>